<body></body>
<script src="./js/axios.js"></script>
<script src="./js/pixi.js"></script>
<script type="module">
    import {createApp,createRenderer} from './js/vue4.js';
    
    const canvasPixi = new PIXI.Application({ background: '#1099bb', resizeTo: window });
    document.body.appendChild(canvasPixi.view);

    //为了测试用的Y坐标，没实际用处。
    let y = [];

    createRenderer({

        createVirtuallyElement:function (assembly,dom,parentElement,Element){
            let childNodes = [];
            for(let i=0;i<dom.length; i++){
                if(dom[i].nodeType === 1){
                    let newElement = new Element(dom[i]);
                    newElement.nodeValue = newElement.innerHTML;
                    newElement.refNodeValue = newElement.nodeValue;
                    newElement.refActiveList = [{'active':'text'}];
                    childNodes.push(newElement);
                }
            }
            
            return childNodes;
        },

        createElement:function (_element){

            let style = new PIXI.TextStyle({
                fontFamily: 'Arial',
                fontSize: 36,
                fontStyle: 'italic',
                fontWeight: 'bold',
                fill: ['#ffffff', '#00ff99'], 
                stroke: '#4a1850',
                strokeThickness: 5,
                dropShadow: true,
                dropShadowColor: '#000000',
                dropShadowBlur: 4,
                dropShadowAngle: Math.PI / 6,
                dropShadowDistance: 6,
                wordWrap: true,
                wordWrapWidth: 440,
                lineJoin: 'round',
            });
            
            let dom = new PIXI.Text('Rich text with a lot of options and across multiple lines', style);
            dom.x = 50;
            
            y.push(dom);

            dom.y = 100+(y.length*40);
            return dom;
        },
        insert:function (_element,dom){
           
            if(!dom.nodeType){
                dom.text = _element.refNodeValue;
                dom.updateText();
                //console.log(dom);
                canvasPixi.stage.addChild(dom);
                //console.log(dom,typeof(dom),'=======',dom.prototype);
            }

            //console.log(dom);
            //app.stage.addChild(dom);
        },
        setElementText:function (dom,text){
            dom.text = text;
            dom.updateText();
        }
    })

    const app = createApp('./vue/pixi.vue');
</script>
